<!--
 * @Description: 
 * @Author: ZachGmy
 * @Date: 2025-04-11 14:00:40
 * @LastEditors: ShaoRuijie 1467374483@qq.com
 * @LastEditTime: 2025-07-24 15:46:24
-->
<template>
  <div>
    <!-- 设置标题 -->
    <Title title="设备状态分布"></Title>
    <!-- 1.提供图表容器 -->
    <div ref="left2" style="height: 150px;margin-top: 15px;"></div>
  </div>
</template>

<script>
// 引入饼状图
import { Pie } from '@antv/g2plot';
// 引入get
import { get } from "@/utils/request";
export default {
data() {
  return {
    devArr:[]
  }
},
async mounted() {
  await this.getDevData();
  await this.initLeft2();
},
methods: {
  initLeft2(){
    const data = [
  { type: '分类一', value: 27 },
  { type: '分类二', value: 25 },
  { type: '分类三', value: 18 },
  { type: '分类四', value: 15 },
  { type: '分类五', value: 10 },
  { type: '其他', value: 5 },
];

const piePlot = new Pie(this.$refs.left2, {
  appendPadding: 10,
  data:this.devArr,
  angleField: 'value',
  colorField: 'type',
  radius: 0.8,
  label: {
    type: 'outer',
  },
  legend: {
  position: 'right', // 确保图例在右侧
  itemName: {
    style: {
      fill: '#ffffff', // 设置文字颜色为白色
      fontSize: 12,    // 可选：设置文字大小
    },
  },
},
  interactions: [{ type: 'element-active' }],
});

piePlot.render();
  
},
// 获取设备状态分布数据
async getDevData(){
  // http://123.57.81.149:7001/count/countAll
  // /count/countAll
  let devData= await get('/count/countAll')
  // console.log(devData.data);
  this.devArr =devData.data
}
}
}
</script>

<style lang="scss" scoped></style>
